<template>
  <div id="search-box" class="search-container">
    <div class="search-container">
      <!-- 搜索框 -->
      <input
          v-model="query"
          type="text"
          placeholder="请输入书名、作者或关键字..."
      />
      <button @click="onSearch">搜索</button>

      <!-- 搜索结果表格 -->
      <table v-if="showResults" class="results-table">
        <thead>
        <tr>
          <th>ID</th>
          <th>书名</th>
          <th>作者</th>
          <th>状态</th>
          <th>借阅日期</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="book in results" :key="book.id">
          <td>{{ book.id }}</td>
          <td>{{ book.title }}</td>
          <td>{{ book.author }}</td>
          <td>{{ book.status }}</td>
          <td>{{ book.borrowDate || "无" }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
  </template>/

<script>
export default {
  data() {
    return {
      query: "",
      books: [
        {
          id: 1,
          title: "数据结构与算法",
          author: "张三",
          status: "可借阅",
          borrowDate: null,
        },
        {
          id: 2,
          title: "人工智能导论",
          author: "李四",
          status: "已借出",
          borrowDate: "2024-12-20",
        },
        {
          id: 3,
          title: "深度学习实践",
          author: "王五",
          status: "可借阅",
          borrowDate: null,
        },
      ],
      results: [],
      showResults: false, // 控制表格是否显示
    };
  },
  methods: {
    onSearch() {
      // 当点击搜索时才进行搜索
      const keyword = this.query.toLowerCase().trim();
      this.results = this.books.filter(
          (book) =>
              book.title.toLowerCase().includes(keyword) ||
              book.author.toLowerCase().includes(keyword)
      );
      this.showResults = true; // 点击搜索后显示结果
    },
  },
};
</script>

<style scoped>
.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
}

input[type="text"] {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
  width: 300px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

.results-table {
  margin-top: 20px;
  width: 100%;
  max-width: 600px;
  border-collapse: collapse;
}

.results-table th,
.results-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.results-table th {
  background-color: #f4f4f4;
  font-weight: bold;
}

.results-table tr:nth-child(even) {
  background-color: #f9f9f9;
}
</style>
